<template>
  <!--动态的吧app 的背景设置为bing的每日图片 -->
  <div :style="{ backgroundImage: 'url(' + bingImage4k + ')' }" id="app">
    <!-- bingImage4k为图片url 是vuex中维护和about 组件中的同步 -->
    <!-- 主要的容器 -->
    <div class="container">
      <!-- 自己的头组件 -->
      <MyHeader />
      <div class="mainBox">
        <!-- 是一个flex布局 默认的左右布局-->
        <MyAside />
        <!-- 左边的导航栏 -->
        <router-view> </router-view>
        <!-- 主要的页面在这里 -->
        <MyAsideRight />
        <!-- 右边的导航栏 -->

      </div>
    </div>
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader.vue";
import MyAside from "./components/MyAside";
import MyAsideRight from "./components/MyAsideRight";

export default {
  name: "app",
  components: {
    MyHeader,
    MyAside,
    MyAsideRight,
  },
  mounted() {
    //初始化每日bing图片 执行vuex里面的初始化操作
    this.$store.dispatch("InitBingImageUrlAsync");
  },
  computed: {
    bingImage4k() {
      //把默认从api获得的1080purl改成UHD
      return this.$store.state.bingImageUrl.replace(/1920x1080/g, "UHD");
    },
  },
};
</script>

<style>





* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  cursor: pointer;
}

ul, li {
  list-style: none;
}
button {
  cursor: pointer;

  border: none;

  background-color: inherit;
}

#app {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  background: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

body {
  color: #58666e;
  font-family: "Source Sans Pro", "Hiragino Sans GB", "Microsoft Yahei", SimSun,
    Helvetica, Arial, Sans-serif, monospace;
  /*background-color: #efefef;*/
}

.container {
  /*display: flex;*/

  width: 75rem;
  height: 100%;
  /* background-color: pink; */
  background-color: #f9f9f9;
  position: relative;
  box-shadow: 0 0 4px 3px rgb(0 0 0 / 5%);
}

.mainBox {
  display: flex;
  /*overflow: hidden;*/
}
</style>
